<template>
  <div class="setting-page">
    <a-row :gutter="16">
      <!-- 左侧分组菜单 -->
      <a-col :span="6">
        <group-menu
          :group-list="groupList"
          :current-group-id="currentGroupId"
          @select="handleGroupSelect"
          @add="handleGroupAdd"
          @edit="handleGroupEdit"
          @delete="handleGroupDelete"
        />
      </a-col>
      
      <!-- 右侧配置列表 -->
      <a-col :span="18">
        <a-card :bordered="false">
          <template #title>
            <span>{{ currentGroupName || $t('setting.config') }}</span>
          </template>
          
          <!-- 搜索表单 -->
          <search-form
            :query-params="queryParams"
            @search="handleSearch"
            @reset="handleReset"
          />
          
          <!-- 表格操作 -->
          <table-operations
            @add="handleConfigAdd"
            @refresh="handleRefresh"
            @search="handleSearch"
            @reset="handleReset"
          />
          
          <!-- 配置表格 -->
          <config-table
            :data="configList"
            :loading="loading"
            :pagination="pagination"
            @table-change="handleTableChange"
            @edit="handleConfigEdit"
            @delete="handleConfigDelete"
          />
        </a-card>
      </a-col>
    </a-row>
    
    <!-- 分组表单弹窗 -->
    <group-form-modal
      v-model:open="groupModalVisible"
      :form="groupFormData"
      :mode="groupFormMode"
      :loading="submitLoading"
      @submit="handleGroupSubmit"
    />
    
    <!-- 配置表单弹窗 -->
    <config-form-modal
      v-model:open="configModalVisible"
      :form="configFormData"
      :mode="configFormMode"
      :loading="submitLoading"
      :group-list="groupList"
      @submit="handleConfigSubmit"
    />
  </div>
</template>

<script lang="ts" setup>
import useSettingManagement from './hooks/useSettingManagement'
import GroupMenu from './components/GroupMenu.vue'
import SearchForm from './components/SearchForm.vue'
import TableOperations from './components/TableOperations.vue'
import ConfigTable from './components/ConfigTable.vue'
import GroupFormModal from './components/GroupFormModal.vue'
import ConfigFormModal from './components/ConfigFormModal.vue'

defineOptions({
  name: 'SettingManagement'
})

// 使用设置管理钩子
const {
  // 状态
  loading,
  submitLoading,
  groupList,
  configList,
  queryParams,
  pagination,
  groupModalVisible,
  configModalVisible,
  groupFormMode,
  configFormMode,
  currentGroupId,
  currentGroupName,
  groupFormData,
  configFormData,
  
  // 分组方法
  handleGroupSelect,
  handleGroupAdd,
  handleGroupEdit,
  handleGroupDelete,
  handleGroupSubmit,
  
  // 配置方法
  handleConfigAdd,
  handleConfigEdit,
  handleConfigDelete,
  handleConfigSubmit,
  
  // 通用方法
  handleSearch,
  handleReset,
  handleRefresh,
  handleTableChange
} = useSettingManagement()
</script>

<style lang="scss" scoped>
.setting-page {
  padding: 16px;
  min-height: 100%;
}
</style> 